<script setup lang="ts">
import CdlTable from "@/components/table";
import {TableTree} from "@/interfaces/components/Table";
import {Message} from "@/interfaces/views/message/message";
import {ref, h} from "vue";
import CdlDescriptions from "@/components/descriptions";
import {createPopup} from "@/utils/createPopup";
import {DescriptionsTree} from "@/interfaces/components/Descriptions";

const tree: TableTree<Message> = {
  colRule: [
    {ti: "群发任务ID"},
    {ti: "短信模版"},
    {ti: "接收人"},
    {ti: "任务创建时间"},
    {ti: "创建人"},
  ],
  control: [
    {name: "详情", type: "info", prop: "id", method: openCreateMessageInfo}
  ]
}

let messageData = ref([{}])
const messageDescriptionTree: DescriptionsTree<Message> = [
  {label: "任务ID"},
  {label: "短信模版"},
  {label: "短信接收人"},
  {label: "接收人数"},
  {label: "发送短信数"},
  {label: "创建时间"},
  {label: "创建人"},
  {label: "短信内容", span: 2},
]
const messagePopupData = ref({})

function openCreateMessageInfo(id: number | string){
  createPopup("群发任务详情", h(CdlDescriptions, {
    templateTree: messageDescriptionTree,
    model: messagePopupData,
    column: 1
  }), "info")
}
</script>

<template>
  <CdlTable :template-tree="tree" :data="messageData"></CdlTable>
</template>
